/**
 * Shopware 5
 * Copyright (c) shopware AG
 *
 * According to our dual licensing model, this program can be used either
 * under the terms of the GNU Affero General Public License, version 3,
 * or under a proprietary license.
 *
 * The texts of the GNU Affero General Public License with an additional
 * permission and of our proprietary license can be found at and
 * in the LICENSE file you have received along with this program.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU Affero General Public License for more details.
 *
 * "Shopware" is a registered trademark of shopware AG.
 * The licensing of the program under the AGPLv3 does not imply a
 * trademark license. Therefore any rights, title and interest in
 * our trademarks remain entirely with us.
 *
 * @category   Shopware
 * @package    Shopware_Styling
 * @subpackage Notification
 * @version    $Id$
 * @author shopware AG
 */

$default-index: 10000;
.alert-message {
    @include border-radius(4px 4px 4px 4px);
    @include single-box-shadow;

    position: fixed;
    top: 60px;
    z-index: $default-index;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 13px;

    & > div {
        @include border-radius(4px 4px 4px 4px);
        @include single-box-shadow(rgba(255, 255, 255, 0.25), 0, 1px, 0, false, true);

        padding: 7px 15px;
        border-width: 1px;
        border-style: solid;
    }

    & strong {
        font-weight: bold;
    }

    & .close {
        float: right;
        opacity: 0.25;
        text-shadow: 0 1px 0 #fff;
        font-weight: bold;
        color: #404040;
        font-family: Arial,sans-serif;
        line-height: 16px;
        font-size: 16px;
        text-decoration: none;
        -webkit-transition: opacity 0.3s ease-out;
           -moz-transition: opacity 0.3s ease-out;
            -ms-transition: opacity 0.3s ease-out;
             -o-transition: opacity 0.3s ease-out;
                transition: opacity 0.3s ease-out;

        &:hover {
            text-decoration: none;
            color: #000;
            opacity: 0.4;
        }
    }

    .error, .success, .info {
        color: #fff;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    }

    .notice {
        background: svg-linear-gradient(0%, 0%, 0%, 100%, (
                      svg-color-stop(#ffdd7f, 0%, 1),
                      svg-color-stop(#eedc94, 100%, 1)
                    )) center center no-repeat transparent;
        color: #404040;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    }

    .error {
        background: svg-linear-gradient(0%, 0%, 0%, 100%, (
                      svg-color-stop(#ee5f5b, 0%, 1),
                      svg-color-stop(#c43c35, 100%, 1)
                    )) center center no-repeat transparent !important;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    }

    .success {
        background: svg-linear-gradient(0%, 0%, 0%, 100%, (
                      svg-color-stop(#62c462, 0%, 1),
                      svg-color-stop(#57a957, 100%, 1)
                    )) center center no-repeat transparent;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    }

    .info {
        background: svg-linear-gradient(0%, 0%, 0%, 100%, (
                      svg-color-stop(#5bc0de, 0%, 1),
                      svg-color-stop(#339bb9, 100%, 1)
                    )) center center no-repeat transparent;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    }
}

/*	INLINE BLOCK MESSAGES
	-------------------------------------------- */
.block-message {
	margin: 0 0 8px;

	/** General styles */
	.success, .error, .notice {
		margin: 0 !important;
		text-align: center;
		color: #fff;
		display: block;
		text-shadow: 0 0 5px rgba(0,0,0,.3);
		font-weight: bold;
		font-size: 16px;
		padding: 15px 20px !important;
	}

	/** Success message - green */
	.success {
		background-color: #2ecc71;
	}

	/** Error message - red */
	.error {
		background-color: #e74c3c;
	}

	/** Notice message - yellow */
	.notice {
		background-color: #f1c40f;
	}
}

/*	GROWL LIKE MESSAGE
	-------------------------------------------- */
.growl-msg {
    @include single-transition(opacity, 0.2s);
	@include opacity(0);
	position: fixed;
	top: 50px;
	z-index: 99999;
	width: 300px;

	& > .#{$prefix}panel-body {
		@include border-radius(3px);
		@include single-box-shadow($font-color, 0, 0, 5px);
		background: #17181a url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAIAAACw1AcgAAAACXBIWXMAAAsTAAALEwEAmpwYAAAATElEQVQIHQXBwRECMQDEsI275MODxpmjj9hIvN4ftvF9fmRscc6hpEaLGduo0EuNkm14L22obEOlpEZKi5SKioqSiowWKik1tqioSP+tqFiZ0owZ3AAAAABJRU5ErkJggg==") repeat-x;
		border: 1px solid #000;
	}

	.alert {
		@include border-radius(3px);
		@include inner-border(1px 1px 0 1px, #53585c);
		padding: 8px 12px;
		color: #fff;
		text-shadow: 0 1px 0 #000;
		font-size: 11px;
	}

    a { color: #fff; text-shadow: 0 1px 0 #000; text-decoration: underline }

	.title { font-weight: bold; margin: 0 0 4px }
}
/*	GROWL STICKY NOTIFICATION
	-------------------------------------------- */
.growl-msg-sticky-notification > .#{$prefix}panel-body {
	@include inner-border(1px 1px 0 1px, #53585c);
}
.growl-msg-sticky-notification {
	display: block;

	.alert {
		-webkit-box-shadow: 0 0 0 transparent;
		-moz-box-shadow: 0 0 0 transparent;
		box-shadow: 0 0 0 transparent;
	}

	.growl-msg-btn-content {
		padding: 8px 12px 8px 0;
	}

	.#{$prefix}btn-growl-sticky-small {
		@include border-radius(3px);
		@include inner-border(1px 1px 0 1px, #53585c);
		@include box-shadow(0 1px 1px #5b5b5b);

        background: svg-linear-gradient(0%, 0%, 0%, 100%, (
                      svg-color-stop(#4c4c4c, 0%, 1),
                      svg-color-stop(#242424, 100%, 1)
                    )) center center no-repeat transparent;

		background-color: #4c4c4c;
		display: block;
		padding: 4px 10px;
		border: 1px solid #000;
		margin: 0 2px 4px;

		&:hover {
          background: svg-linear-gradient(0%, 0%, 0%, 100%, (
                        svg-color-stop(#242424, 0%, 1),
                        svg-color-stop(#4c4c4c, 100%, 1)
                      )) center center no-repeat transparent;
		}
	}

	.#{$prefix}btn-growl-sticky-small button {
		color: #fff;
		text-shadow: 0 1px 0 #000;
		font-size: 9px;
		font-weight: bold;
	}
}
